<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="800px"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card style="margin-top:10px;">
            <el-row :gutter="10">
              <el-col :lg='2' :md='3' v-if="btnPermission('Button_Outbound_Edit')">
                <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
                @click='DialogShow'>修改</el-button>
              </el-col>
            </el-row>
      <el-table
        :data="tableData"
        ref="tableData"
        border
        class="tableMarginTop"
        header-row-class-name="tableHeaderClass"
        highlight-current-row
        @selection-change="handleCurrentChange" 
        style="min-height:300px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="key" label="六维元素名称"></el-table-column>
        <el-table-column prop="Tvalue" label="目标值"></el-table-column>
      </el-table>
    </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title='目标值修改' :visible.sync='this.showTable' width="770px" @open="openCreate"
      @close="showTable=false" :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div >
          <el-card>
            <el-form size="mini" ref="form" :model="form"  label-width="110px"
              label-position="left">
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item prop="PARAMDESC" label="六维元素名称：">
                    <el-input v-model="form.PARAMDESC" placeholder="六维元素名称" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="PARAMVALUE" label="目标值：">
                    <el-input v-model="form.PARAMVALUE" placeholder="请输入目标值" ></el-input>
                  </el-form-item>
                </el-col>
                </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini"  @click="showTable=false">取消</el-button> 
            <el-button type="primary" size="mini" @click="sure" >确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import query from "@/message/siteManagement/queueDetail/query";
import request1 from "@/common/utils/requestYg";
import getGlobalParams from "@/common/utils/getGlobalParams";
import toolBox from "@/common/utils/toolBox";
import mod from "@/message/siteManagement/eleArrManage/query";

export default {
  data() {
    return {
      radio: "",
      loading: false,
      showTable:false,
      tableData:[],
      currentRow: [],
      form: {
        PARAMDESC:"",
        PARAMVALUE:""
      },
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
    
  },
  methods: {
    sure(){
      this.loading = true;
      let resBody = new mod();
      resBody.data.PARAMDESC = this.form.PARAMDESC;
      resBody.data.PARAMVALUE = this.form.PARAMVALUE;
      resBody.data.oper_type = "U";
      request1(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.$emit("refreshTable");
            this.$message({
              type: "success",
              message: `维护${response.SYS_HEAD.ReturnMessage}!`
            });
            this.showTable= false;
            this.isShow = false;
          } else {
            this.$message({
              type: "error",
              message: `${response.SYS_HEAD.ReturnMessage}!`
            });
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    query(){
      this.loading = true;
      let resBody = new query();
      // resBody.data.PAGEFLAG = 4;
      // resBody.data.CURRPAGE = this.currentPage;
      // resBody.data.PAGEROWNUM = this.pageSize;

      request1(resBody)
      .then(response => {
        if(response.SYS_HEAD.ReturnCode === "000000"){
          this.tableData = response.RSP_BODY.QueueList || [];
          this.totalRcrdNum = response.RSP_BODY.RecordNum;
        } else {
          this.$message({
            type: "error",
            message: response.SYS_HEAD.ReturnMessage
          });
          this.tableData = [];
          this.totalRcrdNum = 0;
        }
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
      })
    },
    DialogShow(){
      this.showTable = true;
      this.form.PARAMDESC = this.currentRow[0].key;
      this.form.PARAMVALUE = this.currentRow[0].Tvalue
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      // if (this.$refs["form"] != undefined) {
      //   this.$refs["form"].resetFields(); //清楚表单验证
      //   this.$refs["form"].clearValidate(); //清楚表单验证
      // }
      // this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      // this.$refs.form.clearValidate();
    },
    openCreate(){
      let dataInfo = this.option.tableData;
      this.tableData = [];
      let i = 0;
      for(var b in dataInfo){
        let keyMap = {};
        keyMap.key = b;
        keyMap.Tvalue = dataInfo[b];
        this.tableData[i] = keyMap;
        i++;
      }
    },
    handleCurrentChange(val) {
      //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
      this.currentRow = val;
    },
  }
};
</script>
<style lang="scss" scoped>


